<template>
  <div id="basic-layout">
    <a-layout class="basic-layout-layout">
      <!--   顶部导航栏   -->
      <a-layout-header v-if="this.$route.meta.headLayout !== false"
                       :style="{ height: this.$config.layout.BasicLayout.header.height,
                        background: '#001529' }">
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="6">
            <header-title></header-title>
          </a-col>
          <a-col :span="12">
              <header-menu ref="headerMenu"></header-menu>
          </a-col>
          <a-col :span="6">
            <header-content></header-content>
          </a-col>
        </a-row>

      </a-layout-header>
      <!--   核心内容区   -->
      <a-layout class="basic-layout-main">
        <a-layout-sider width="240px"
                        v-if="this.$route.meta.sideLayout !== false"
                        :style="{ overflow: 'auto', left: 0,
                         background: '#FFFFFF',
                         borderRight: '1px solid #e8e8e8',
                         boxShadow: '0 80px 0 0 rgb(0 0 0 / 10%)'}"
                        :collapsed="collapsed"
                        :callapsible="this.$config.layout.BasicLayout.sider.collapsible"
                        :trigger="null" collapsible>
          <a-layout>
            <!-- 左侧导航栏头部区域 -->
            <a-layout-header
              class="basic-layout-main-header"
              style="background:#FFFFFF;border-bottom: 1px solid #e8e8e8">
              <sider-title :title="moduleName" @modify="changeCollapse"></sider-title>
            </a-layout-header>
          </a-layout>
          <!-- 左侧导航栏内容区域 -->
          <sider-menu :moduleRoots="moduleRoots"></sider-menu>
        </a-layout-sider>
        <a-layout>
          <!-- 右侧内容区域 -->
          <a-layout-content class="basic-layout-content">
            <router-view />
          </a-layout-content>
        </a-layout>

      </a-layout>
    </a-layout>

  </div>
</template>

<script>
  import HeaderTitle from '@/views/layouts/components/HeaderTitle'
  import HeaderContent from '@/views/layouts/components/HeaderContent'
  import HeaderMenu from '@/views/layouts/components/HeaderMenu'
  import SiderTitle from '@/views/layouts/components/SiderTitle'
  import SiderMenu from '@/views/layouts/components/SiderMenu'
  import { useStore } from 'vuex'
  import { toRaw } from '@vue/reactivity'
  export default {
    name: 'BasicLayout',
    data () {
      return {
        collapsed: false, // 展开还是收起状态,false为展开状态
        modelI18n: false, // 应用是否支持国际化
        moduleName: '', // 应用名称
        moduleRoots: [] // 应用下模块路由
      }
    },
    components:{
      HeaderTitle,
      HeaderContent,
      HeaderMenu,
      SiderMenu,
      SiderTitle
    },
    computed: {
    },
    methods: {
      /**
       * 改变左侧导航栏的伸缩状态
       * @param val
       */
      changeCollapse (val) {
        this.collapsed = val
      },
      /**
       * 获得模块信息
       */
      getModelInfo (val) {
        // 获取vuex中的模块信息
        const moduleInfos = this.$store.getters.getModuleInfos.moduleInfos
        // 拆分当前路由的name的第一个单词，就是模块的名称，拿到模块的信息
        const moduleInfo = moduleInfos[val.split('-')[0]]
        this.moduleName = moduleInfo.meta.i18n ? this.$t(moduleInfo.meta.title) : moduleInfo.meta.title
        this.moduleRoots = moduleInfo.children
      },
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        if (to.meta) {
          if (to.meta.sideLayout !== false) {
            vm.getModelInfo(to.name)
          }
        }
      })
    },
    setup () {
      const store = useStore()
      const cacheViews = toRaw(store.getters.getCacheViews)

      return {
        cacheViews
      }
    },
    watch: {
      '$route.path': {
        handler: function(newVal, oldVal) {
          this.$nextTick(() => {
            if (!newVal.startsWith('/login')) {
              if (this.$route.meta.headLayout !== false) {
                this.$refs.headerMenu.headKeysChange(newVal)
              }
            }
          })
        },
        immediate: true
      }
    }
  };
</script>

<style lang="less" scoped>
  #basic-layout{
    width: 100%;
    height: 100%;
    .basic-layout-layout{
      height: 100%;
      .basic-layout-main{
        overflow-x: auto;
        .ant-layout-sider-children{
          ul.ant-menu.ant-menu-root.ant-menu-inline.ant-menu-light{
            border: 0;
            font-size: 15px;
            font-weight: 500;
            :deep(.ant-menu) {
              font-size: 15px;
            }
          }
        }
        .basic-layout-main-header{
          height: 48px;
          line-height: 48px;
          padding: 0;
          font-size: 20px;
          font-weight: 900;
        }
        .basic-layout-content{
          background: white;
        }
      }
    }
  }
</style>
